import {
    Link,
    Switch,
    Route

} from 'react-router-dom'

import Detail from './showDetail'

let students=[
    {"id":1,"name":"张三","gender":"男","age":19},
    {"id":2,"name":"李四","gender":"女","age":21},
    {"id":3,"name":"李菊花","gender":"女","age":20},
]
export default  ()=>{
  return ( 
<div>
<div>
  <h3>显示用户信息界面</h3>
    <ul>
        {
/*        students.map((item)=><li key={item.id}><Link to={`/users/showInfo/detail/${item.id}`}>{item.name}</Link></li>)
 */        
 
/*        students.map((item)=><li key={item.id}><Link to={`/users/showInfo/detail?id=${item.id}&name=${item.name}`}>{item.name}</Link></li>)
 */        
    students.map((item)=><li key={item.id}><Link to={{
        pathname:"/users/showInfo/detail",
        state:{
            id:item.id,
            name:item.name
        }

    }}>{item.name}</Link></li>)
 }
    </ul>
  </div> 
  <div>
{/*       <Route path="/users/showInfo/detail/:stuid" component={Detail}></Route>
 */
       <Route path="/users/showInfo/detail" component={Detail}></Route>
 } 
 
  </div>
  </div>  
  )
}